<!--
 * @Description: 安全生产信息
 * @Author: Huang Junjie
 * @Date: 2021-06-01 16:50:23
 * @LastEditTime: 2021-07-29 21:44:41
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="safety-production-information-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>安全生产信息</span>
        <div
          class="more-btn"
        >
          共 {{ dataList.length }} 条
          <!-- <i class="el-icon-arrow-right" /> -->
        </div>
      </div>
      <!-- 标题栏 -->

      <!-- 列表 -->
      <!-- <el-scrollbar> -->
      <div class="data-list-div">
        <vue-seamless-scroll
          class="seamless-warp"
          :data="dataList"
          :class-option="seamlessScrollclassOption"
        >
          <ul class="item">
            <div
              v-for="(item, index) in dataList"
              :key="`a${index}`"
              class="data-list"
            >
              <a v-if="item !== null" class="link-style">
                <el-row>
                  <el-col :span="2">
                    <div class="spot-style" />
                  </el-col>
                  <el-col class="link-title-div" :span="22">
                    <span :title="`${item.content}`" class="link-title">
                      <span v-if="item.type == '1'">【变电电闸】</span>
                      <span v-else-if="item.type == '2'">【电力电闸】</span>
                      <span v-else-if="item.type == '3'">【接触网电闸】</span>
                      <span v-else-if="item.type == '4'">【其它信息】</span>
                      {{ item.content }}
                    </span>
                    <div class="link-date">
                      <span>{{ item.date }}</span>
                    </div>
                  </el-col>
                </el-row>
              </a>
            </div>
          </ul>
        </vue-seamless-scroll>
      </div>
      <!-- </el-scrollbar> -->
      <!-- 列表 -->
    </div>
  </div>
</template>

<script>
import { getsafetyProductionInformationDataList } from '@/api/jjxt/production-safety/segment-level-home';
import { getDatatime } from '@/utils';
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      dataList: []
    };
  },
  computed: {
    seamlessScrollclassOption() {
      return {
        step: this.dataList.length > 5 ? 0.5 : 0, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  mounted() {
    this.getsafetyProductionInformationDataList(); // 查询安全生产信息列表
  },
  methods: {
    getDatatime,

    // 查询安全生产信息列表
    getsafetyProductionInformationDataList() {
      getsafetyProductionInformationDataList().then(response => {
        this.dataList = response.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.safety-production-information-style {
  position: relative;
  color: white;
  height: 362px;
  width: 454px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin: 20px 16px 0 16px;
      padding-bottom: 16px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid #0b62a3;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 0;
      }
      .more-btn {
        position: absolute;
        right: 20px;
        color: #eaea4d;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .el-scrollbar {
      position: absolute;
      top: 65px;
      left: 0;
      right: 0;
      bottom: 3px;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .data-list-div {
      margin-top: 5px;
      .seamless-warp{
        height: 100%;
        overflow: hidden;
      }
      .data-list {
        margin: 0 20px 16px 20px;
        // display: flex;
        align-items: center;
        .link-style {
          cursor: default;
          .spot-img-style {
            height: 10px;
          }
          .spot-style {
            width: 5px;
            height: 5px;
            background-color: #ffffff;
            border-radius: 5px;
            margin: 7px 10px 0 9px;
          }
          .link-title-div {
            padding-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            .link-title {
              color: #fcfeff;
            }
          }
          .link-date {
            margin-top: 10px;
            font-size: 14px;
            color: #b7b9c0;
          }
        }
      }
    }
  }
}
</style>
